<template>
  <v-scale-screen width="1920" height="1080">
    <dv-loading v-if="false"></dv-loading>
    <div class="analysis-presentation" style="padding: 2rem 0; padding-top: 3rem">
      <el-row>
        <el-col :span="3">
          <el-button color="#0052ac">
            <div class="mr-1" style="background-color: #fff; color: #0052ac; border-radius: 50%; width: 1rem; height: 1rem">
              <el-icon style="font-size: 0.7em"><Download /></el-icon>
            </div>
            生成报告
          </el-button>
        </el-col>

        <el-col :span="3" :push="18">
          <div style="font-size: 1vw; height: 100%; display: flex; justify-content: flex-end; align-items: flex-end">{{ localDate }}</div>
        </el-col>
      </el-row>
      <el-row style="height: 100%; width: 100%; padding-top: 1%">
        <el-col :span="6">
          <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 0 4%">
            <div class="flex-1 chart" style="width: 100%; height: 100%">
              <div class="chart-label">
                <p>土地概览</p>
              </div>
              <div class="chart-container">
                <div class="chart-title">
                  <div>总面积<span class="highlight">10000000000</span>㎡</div>
                </div>
                <div class="chart-content">
                  <!-- <div ref="landUseChart" style="width: 100%; height: 100%" /> -->
                  <dv-charts :option="option" />
                </div>
              </div>
            </div>
            <div class="flex-1 chart" style="width: 100%; height: 100%">
              <div class="chart-label">
                <p>园区概览</p>
              </div>
            </div>
            <div class="flex-1 chart" style="width: 100%; height: 100%">
              <div class="chart-label">
                <p>公寓出租率</p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%">
            <div style="width: 100%; height: 100%; background-color: aqua; flex: 2; margin-bottom: 4%"></div>
            <div class="flex-1" style="width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center">
              <div class="flex-1 chart" style="width: 100%; height: 100%; margin-right: 2%">
                <div class="chart-label">
                  <p>房产（其他）出租率</p>
                </div>
              </div>
              <div class="flex-1 chart" style="width: 100%; height: 100%">
                <div class="chart-label">
                  <p>办公空间出租率</p>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 0 4%">
            <div class="flex-1 chart" style="width: 100%; height: 100%">
              <div class="chart-label">
                <p>汽车运营</p>
              </div>
            </div>
            <div class="flex-1 chart" style="width: 100%; height: 100%">
              <div class="chart-label">
                <p>惠生活</p>
              </div>
            </div>
            <div class="flex-1 chart" style="width: 100%; height: 100%">
              <div class="chart-label">
                <p>混凝土搅拌站</p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </v-scale-screen>
</template>

<script setup lang="ts" name="AnalysisPresentation">
import VScaleScreen from 'v-scale-screen';
import { computed, ref } from 'vue';
import * as echarts from 'echarts';

// const landUseChart = ref(null);

// const landUseChartInit = () => {
//   const landUseChartInstance = echarts.init(landUseChart.value, 'macarons');

//   landUseChartInstance.setOption({
//     tooltip: {
//       trigger: 'item'
//     },
//     legend: {
//       orient: 'vertical'
//     },
//     series: [
//       {
//         name: 'Access From',
//         type: 'pie',
//         radius: ['50%', '80%'],
//         avoidLabelOverlap: false,
//         label: {
//           show: false,
//           position: 'center'
//         },
//         labelLine: {
//           show: false
//         },
//         data: [
//           { value: 1048, name: 'Search Engine' },
//           { value: 735, name: 'Direct' },
//           { value: 580, name: 'Email' },
//           { value: 484, name: 'Union Ads' },
//           { value: 300, name: 'Video Ads' }
//         ]
//       }
//     ]
//   });

//   window.addEventListener('resize', () => {
//     landUseChartInstance.resize();
//   });
// };

const localDate = computed(() => {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
  const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
  return year + '年' + month + '月' + day + '日';
});

const option = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['50%', '80%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
});

onMounted(() => {
  // landUseChartInit();
});
</script>

<style lang="scss">
canvas {
  width: 100%;
  height: 100%;
}
body,
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
p {
  margin: 0;
  padding: 0;
}

.highlight {
  color: #ffab3e;
}

.analysis-presentation {
  color: white;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/u6862.png');
  background-size: 100% 100%;
  background-size: not-repeat;
}

.chart {
  margin-bottom: 4%;
  background-image: url('@/assets/images/u6866.png');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .chart-label {
    padding-left: 4%;
    padding-top: 1.4%;
    font-size: 1.2rem;
  }

  .chart-container {
    padding: 1vw;
    bacground-color: ring-cyan;
    height: 100%;
    .chart-title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 1vw;
    }
    .chart-content {
      width: 100%;
      height: 82%;
    }
  }
}
</style>
